<template>
	<view class="wrapper">
		<div class="main">
			<div class="detail bfff">
				<div class="center mb35 align-start c666">
					<image src="../../static/mall/address.png" mode="widthFix" class="address-icon"></image>
					<div class="ml18 f26 flex1">收货地址：{{detail.receiverAddress}}</div>
				</div>
				<div class="f30 fbold mb25 yunshu c333 posr">
					<image src="../../static/mall/wuliu.png" mode="widthFix" class="address-icon"></image>
					{{list.cname}}
				</div>
				<div class="t-list c666 ml20">

					<div class="mb31" v-for="v in list.list" :key="v.time">
						<div class="f26 mb15 t-text">{{v.content}}</div>
						<div class="f20">{{v.time}}</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				list: {
					list: []
				},
				detail: {}
			}
		},
		onLoad(e) {
			this.orderId = e.orderId
			this.getlogistics()
		},
		methods: {
			// 查询收货地址
			getlogistics() {
				this.$http(`/api/logistics/view?orderNo=${this.orderId}&token=${uni.getStorageSync('uInfo').token}`).then((
					r) => {

					this.list = JSON.parse(r.data)
					console.log(this.list)
				})
				this.$http('/api/mall/order/view', {
					orderNo: this.orderId
				}).then((r) => {

					this.detail = r.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 30rpx 32rpx 35rpx;

		.detail {
			width: 686rpx;
			border-radius: 12rpx;
			box-shadow: 0rpx 0rpx 30rpx #E6E6E6;
			padding: 28rpx 33rpx 66rpx;

			.address-icon {
				width: 40rpx;
				height: 40rpx;
			}

			.flex1 {
				line-height: 44rpx;
			}

			.t-list {
				border-left: 1rpx solid #C3C4FC;
				padding-left: 28rpx;

				.wuliu-icon {
					width: 40rpx;
					height: 30rpx;
				}

				.t-text {
					line-height: 44rpx;
				}

				.mb31 {
					position: relative;

					&::after {
						content: '';
						position: absolute;
						left: -42rpx;
						top: 8rpx;
						width: 24rpx;
						height: 24rpx;
						background: #FFFFFF;
						border: 2rpx solid #C3C4FC;
						border-radius: 50%;
					}

					&:last-child {
						&:before {
							content: '';
							position: absolute;
							left: -42rpx;
							top: 34rpx;
							width: 24rpx;
							height: 100rpx;
							background: #FFFFFF;
						}
					}
				}
			}
		}

	}
</style>